<template>
  <div class="home">
    <ul class="lists">
      <router-link tag="li" to="/group" class="li">
        <div class="img c-testimg"></div>
        <div class="cont">
          <div class="dt">一小群</div>
          <div class="dd">linxm</div>
        </div>
        <div class="arrow">
          <i class="icon-arrow1"></i>
        </div>
      </router-link>
      <router-link tag="li" to="/group" class="li">
        <div class="img c-testimg"></div>
        <div class="cont">
          <div class="dt">一小群</div>
          <div class="dd">linxm</div>
        </div>
        <div class="arrow">
          <i class="icon-arrow1"></i>
        </div>
      </router-link>
      <li class="last"><i class="icon-add"></i>新建小群</li>
    </ul>
    <my-Nav></my-Nav>
  </div>
</template>

<script>
    import myNav from '../components/nav.vue'
    export default {
        name: 'home',
        components:{
          myNav
        },
        data () {
            return {}
        },
        mounted (){
          swal({
            title: "Error!",
            text: "Here's my error message!",
            type: "error",
            confirmButtonText: "Cool"
          });
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../assets/css/common.scss";
  .lists{
    padding: rem(55);
    .li{height: rem(180);position: relative;background-color: #fff;border-radius: 10px;overflow: hidden;margin-bottom: rem(30);
      &:before{@include border-half($border-light,'border');border-radius: 10px;}
      .img{width: rem(180);height: 100%;float: left;background: $black-light no-repeat center center / cover;}
      .cont{float: left;padding-left: rem(40);width: rem(320);height: 100%;}
      .dt{height: rem(42);line-height: rem(42);margin-top: rem(50);overflow: hidden;font-size: rem(30);}
      .dd{height: rem(33);line-height: rem(33);margin-top: rem(5);color: $black-light;font-size: rem(24);overflow: hidden;}
      .arrow{height: 100%;line-height: rem(180);color: $black-light;float: right;margin-right: rem(60);
        i{vertical-align: middle;}
      }
    }
    .last{height: rem(180);line-height: rem(180);text-align: center;border-radius: 10px;border: 1px dashed $black-light;color: $black-light;font-size: rem(30);
      i{margin-right: rem(30);font-size: rem(50);vertical-align: middle;}
    }
  }
</style>
